import React, {Component} from 'react';
import {render} from 'react-dom';

import ModalElement, {modal} from './widget/modal/modal';

const $ = require("jquery");

require('../less/main.less');

import _alert from './widget/alert/alert'

$("#alert1 button").on('click', function (e) {
    _alert({
        msg: '你妹啦',
        okHidden: function () {
            alert('确定');
        }
    })
})

import confirm from './widget/confirm/confirm'

document.querySelectorAll('#confirm button')[0].onclick = function () {
    confirm({
        msg: '你妹啦',
        okHidden: function () {
            alert('确定');
        },
        cancleHidden: function () {
            alert('取消');
        }
    })
}

//Loading
import Loading from './widget/loading/loading'

document.querySelectorAll('#loading button')[0].onclick = function () {
    var self = this;
    Loading.show();

    setTimeout(function () {
        Loading.hide();
    }, 3000);
}

document.querySelectorAll('#modal1')[0].onclick = function () {
    var a = modal({
        children: (<h1>我是弹出层</h1>),
        type: 'nomal',
        unmountDom: false
    });


    setTimeout(function () {
        a.hide();
        setTimeout(function () {
            a.show();


        }, 3000)

    }, 3000)
}

document.querySelectorAll('#modal2')[0].onclick = function () {
    modal({
        children: (<h1>我是弹出层</h1>),
        type: 'nomal',
        background: false
    });
}

document.querySelectorAll('#modal3')[0].onclick = function () {
    modal({
        children: (<h1>我是弹出层</h1>),
        type: 'samll'
    });
}

document.querySelectorAll('#modal4')[0].onclick = function () {
    modal({
        children: (<h1>我是弹出层</h1>),
        type: 'large'
    });
}

document.querySelectorAll('#modal5')[0].onclick = function () {
    modal({
        children: (<h1>我是弹出层</h1>),
        style: {
            width: '500px',
            backgroundColor: 'red'
        }
    });
}

document.querySelectorAll('#modal6')[0].onclick = function () {
    modal({
        children: (<h1>我是弹出层</h1>),
        enterAfter: function () { alert('弹出后') },
        leaveAfter: function () { alert('消失后') },
        enterBefore: function () { alert('弹出前') },
        leaveBefore: function () { alert('消失前') }
    });
}

document.querySelectorAll('#modal7')[0].onclick = function () {
    modal({
        children: (<h1>我是弹出层</h1>),
        enterAfter: function () { _alert({ msg: '回调' }) },
    });
}

document.querySelectorAll('#modal8')[0].onclick = function () {
    modal({
        children: (<h1>我是弹出层</h1>),
        style: {
            height: '2400px',
        }
    });
}

document.querySelectorAll('#modal9')[0].onclick = function () {
    modal({
        children: (
            <div>
                <div className="title">我是标题</div>
                <h1>我是带标题的弹出层</h1>
            </div>)
    });
}


import modalShow from './widget/modal/modal';

import TextEditor from './widget/texteditor/TextEditor';

render(
    <TextEditor id="editor1" content='该配合你演出的我演视而不见'/>,
    document.getElementById('texteditor')
)


import toast from './widget/toast/toast'

document.querySelectorAll('#toast')[0].onclick = function () {
    toast({
        msg: '啦啦啦德玛西亚'
    });
}
document.querySelectorAll('#toast1')[0].onclick = function () {
    toast({
        msg: '啦啦啦德玛西亚',
        autoClose: false
    });
}
document.querySelectorAll('#toast2')[0].onclick = function () {
    toast({
        msg: '啦啦啦德玛西亚',
        waitingTime: 1000
    });
}

import ContextMenu from './widget/contextmenu/contextmenu'


class ContexntMenuTest extends Component {
    render() {
        return (
            <ContextMenu menuList={[
                {
                    title:'测试1',
                    callback:function(){
                        console.info('测试1')
                    }
                },{
                    title:'测试2',
                    callback:function(){
                        console.info('测试2')
                    }
                },{
                    title:'啦啦啦德玛西亚',
                    callback:function(){
                        _alert({msg:"臭不要脸"});
                    }
                }
            ]}>
            <textarea style={{width:'100%'}} placeholder="请点击右键测试右键菜单"></textarea>
            </ContextMenu>
        );
    }
}

render(<ContexntMenuTest />,document.getElementById('contextmenu'));
